<template>
    <div id="the1">
        <div class="md-header-fixed">
            <header class="md-header">
                <div class="logo"><img src="../assets/images/logo.png"></div>

                <div class="search" id="logoHeadSearch">
                    <router-link to="/search" class="url1">我的猫咖</router-link>
                    <router-link to="/search" class="url2">我的猫咖</router-link>


                </div>
                <div class="login" id="user_login">
                    <div class="before">
                        <router-link to="/user" class="user"></router-link>

                       </div>

                </div>
            </header>
            <nav class="md-nav">
                <div class="md-nav11 cf">
                    <router-link to="/home">推荐</router-link>
                    <router-link to="/new">最新</router-link>
                    <router-link to="/rank">排行</router-link>
                    <router-link to="/class" class="cur">找游戏</router-link>
                </div>


            </nav>
        </div>
        <div class="bannerbox">
            <div class="swiper">
                <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" @change="onChange">

                    <van-swipe-item>
                        <img src="https://imga1.4399.cn/upload_pic/2022/11/1/4399_09103014718.gif" alt=""
                            style="width: 100%;display: block;height: 100%;">
                    </van-swipe-item>




                </van-swipe>
            </div>

        </div>

        <div class="mgb20">
            <div class="sort-type cf">
                <router-link to="./gameCont?id=4" class="bgc1">
                    <img src="https://imga4.4399.cn/upload_pic/2022/8/10/4399_19205779240.png">单机
                </router-link>
                <router-link to="./gameCont?id=3" class="bgc2">
                    <img src="https://h.4399.com/images/2022/sort-mj.png">闯关
                </router-link>
                <router-link to="./collection" class="bgc3">
                    <img src="https://h.4399.com/images/2022/sort-hj.png">合辑
                </router-link>
                <router-link to="./allClass" class="bgc4">
                    <img src="https://h.4399.com/images/2022/sort-all.png">全部
                </router-link>

            </div>
            <div class="md-gamebox" v-for=" (k, index) in  this.list " :key="index">
                <div class="hd">
                    <router-link :to="'./gameCont?id=' + k.id" class="title">
                        {{ k && k.title }}
                    </router-link>
                    <router-link :to="'./gameCont?id=' + k.id" class="more">
                        更多
                    </router-link>

                </div>
                <div class="bd cf">
                    <ul>
                        <li v-for=" (item, index) in k.data.slice(0, 4) " :key="'ifo-' + index">
                            <router-link :to="'./GameDetails?id=' + item.id">
                                <img :src="item.pic">
                                <i></i>
                            </router-link>
                            <em>{{ item.title }}</em>
                        </li>
                    </ul>
                </div>
            </div>
        </div>


    </div>
</template>
  
<script>
import { gameCont } from '@/api/home';
// import { Sticky } from 'vant';
export default {
    data() {
        return {
            phone: '',
            password: '',
            code: '',
            indexSwiper: 0,
            container: null,
            con: null,
            coco: null,
            bad: null,
            list: [],
            loading: false,
            finished: false,

            count: 1,
            scrollTop: "",//距离顶部的距离
            scrollHeight: "",//总共的高
            offsetHeight: "",//当前页面的高

        };
    },
    methods: {

        onChange(index) {
            this.indexSwiper = index;
        },

    },
    mounted() {
        gameCont().then(data => {

            this.list = data

            console.log(this.list);





        });


    }

}
</script>
  
<style lang="scss" scoped>
.sort-type a.bgc3 {
    background-color: #e4fff5;
    color: #13af74;
}

.sort-type a.bgc2 {
    background-color: #fff4e1;
    color: #ff6b23;
}

.sort-type a.bgc4 {
    background-color: #ffecec;
    color: #df4c4b;
}

.sort-type a:nth-child(4n) {
    margin-right: 0;
}

.sort-type a {
    height: 34px;
    line-height: 34px;
    border-radius: 5px;
    width: 80px;
    background-color: #f3f3f3;
    float: left;
    margin-right: 11.5px;
    text-align: center;
    font-weight: bold;
    overflow: hidden;
    box-sizing: border-box;
    padding-right: 5px;
    font-size: 12px;
}

.sort-type a img {
    width: 24px;
    height: 24px;
    display: inline-block;
    margin-right: 5px;
}

.sort-type {
    margin: 0 0 30px;
    width: 100%;

}

.sort-type a.bgc1 {
    background-color: #edf8ff;
    color: #4c94fa;
}

.mgb20 {
    // margin-bottom: 16px;
    // padding: 0 10px;
    margin: 0 10px;
}

.md-gamebox li:nth-child(4n) {
    margin-right: 0;
}

.md-gamebox li img {
    width: 62px;
    height: 62px;
    border-radius: 10px;
    display: block;
    margin: 0 auto;
}

.md-gamebox li em {
    line-height: 1.4;
    margin-top: 5px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-break: break-all;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 14px;
}

.md-gamebox li a {
    display: block;
    width: 62px;
    height: 62px;
    position: relative;
    margin: 0 auto;
}

.md-gamebox li {
    float: left;
    width: 62px;
    margin-top: 10px;
    text-align: left;
    margin-right: 35.5px;
    position: relative;
}

.md-gamebox ul {
    display: flex;
    flex-wrap: wrap;
}

.md-gamebox .hd .more,
.md-card4 .hd .more {
    float: right;
    font-size: 13px;
    color: #959595;
    margin-top: 5px;
    height: 15px;
    line-height: 15px;
    padding-right: 10px;
    background: url("https://h.4399.com/images/2022/arrow.png") no-repeat right -0.5px;
    background-size: 9px 14px;
}

.md-gamebox .hd .title {
    color: #333333;
    font-weight: bold;
    font-size: 16px;
    float: left;
    height: 20px;
    line-height: 20px;
}


.md-gamebox .hd {
    overflow: hidden;
}

.md-gamebox {
    width: 100%;

}

.md-gamebox {
    margin-bottom: 30px;
}

.md-nav11 {
    margin: 0 auto;
}



.icon-hot,
.icon-new,
.icon-sf,
.icon-xf,
.icon-hd,
.icon-sd,
.icon-bsd {
    display: block;
    position: absolute;
    top: -2.5px;
    left: -3px;
    width: 33px;
    height: 33px;
}

.cf:after {
    content: '';
    display: block;
    height: 0;
    clear: both;
}


.md-gamebox5 ul {
    display: flex;
    flex-wrap: wrap;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    // justify-content: space-around;

}

ol,
ul,
li {
    list-style: none;
}

body,
html,
a,
img,
div,
form,
select,
input,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
dd,
dl,
dt,
p,
label,
em,
span,
cude,
i {
    margin: 0;
    padding: 0;
    list-style: none;
    vertical-align: middle;
}

.md-gamebox5 {
    margin: 0 10px 15px;
}

.md-gamebox5 li {
    width: 62px;
    margin-bottom: 15px;
    text-align: left;
    float: left;
    margin-right: 35.5px;
}



.md-gamebox5 li a {
    position: relative;
    width: 62px;
    display: block;
    margin: 0 auto;
}

.md-gamebox5 li a img {
    width: 62px;
    height: 62px;
    display: block;
    border-radius: .16rem;
}


.icon-new {
    background: url("https://h.4399.com/images/2022/icon.png") no-repeat;
    background-size: 50px 1400px;
    background-position: 0 -654px;

}

img,
input {
    border: none;
    outline: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.md-gamebox5 li:nth-child(4n) {
    margin-right: 0;
}


em,
i {
    font-style: normal;
    vertical-align: top;
}



.list-head {
    padding: 5px 10px;
    margin-bottom: 0;
    background-color: #f5f5f5 !important;
    margin-bottom: 15px;
    height: 19px;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 15px;

}


.bannerbox {
    background-image: linear-gradient(#E9ECEC, #ffffff);
    height-min: 137px;
    border-radius: 10px;
    margin: 0 10px;
    margin-bottom: 30px !important;

    .swiper {
        border-radius: 10px;

        // margin-top: 50px;
        background-color: aqua;

        overflow: hidden;

        .custom-indicator {
            width: 100%;
            position: absolute;
            left: 0px;
            bottom: 18px;
            text-align: center;

            ul {

                display: inline-block;
                margin: 0 auto;

                li {
                    border-radius: 10px;
                    display: inline-block;
                    width: 7px;
                    height: 7px;
                    margin: 0px 5px;
                    background-color: rgba(255, 255, 255, 0.6);

                    &.con {
                        background-color: #ff6600;
                    }
                }
            }
        }
    }
}

.van-sticky--fixed {
    position: fixed;
    top: 80px;
    right: 0;
    left: 0;
    z-index: 99;
}

.md-header .search .url2,
.md-header .login a,
.md-feedback a,
.md-comment .comment-title p a,
.md-comment .comment-title .comment-url,
.comment-box .ft p i,
.md-search .txt,
.md-fixed p,
.md-fixed i,
.icon-hot,

.icon-sf,
.icon-xf,
.icon-hd,
.icon-sd,
.icon-bsd {
    background: url("https://h.4399.com/images/2022/icon.png") no-repeat;
    background-size: 50px 1400px;
}

a {
    color: #333;
    text-decoration: none;
    outline: none;
}

ol,
ul,
li {
    list-style: none;
}

body,
html,
a,
img,
div,
form,
select,
input,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
dd,
dl,
dt,
p,
label,
em,
span,
cude,
i {
    margin: 0;
    padding: 0;
    list-style: none;
    vertical-align: middle;
}

body {
    font-size: 12px;
    color: #333;
    background-color: #ffffff;
    min-width: 375px;
    margin: 0 auto;
}


.md-header-fixed {
    height: 100px;
    position: relative;
    overflow: hidden;
}

.md-header {

    max-width: 500px;
    min-width: 375px;
    margin: 0 auto;
    position: fixed;
    top: 0;
    width: 100%;
    height: 30px;
    padding: 10px 0;
    background-color: #fff;
    overflow: hidden;
    z-index: 99;

    .logo {
        float: left;
        padding: 3.5px 0 3.5px 12px;

        img {
            height: 22px;
            display: block;
        }
    }

    .search {
        margin: 0 56px 0 142px;
        position: relative;

        .url1 {
            display: block;
            width: 100%;
            height: 30px;
            line-height: 30px;
            padding-left: 14px;
            background-color: #f3f3f3;
            background-position: right -35px;
            border-radius: 15px;
            box-sizing: border-box;
            font-size: 13px;
            color: #959595;
        }

        .url2 {
            position: absolute;
            top: 5px;
            right: -5px;
            display: block;
            width: 35px;
            height: 30px;
            line-height: 250px;
            overflow: hidden;
            cursor: pointer;
            background-position: .50px .600px;
        }
    }

    .login {
        position: absolute;
        top: 10px;
        right: 12px;
        width: 30px;
        height: 30px;

    }
}

.md-header .login a {
    display: block;
    width: 30px;
    height: 30px;
    background-position: 0 -33px;
}

.md-nav {

    max-width: 500px;
    min-width: 375px;
    margin: 0 auto;
    padding: 0 .100px;
    position: fixed;
    top: 50px;
    width: 100%;
    height: 50px;
    line-height: .8rem;
    overflow: hidden;
    background: #fff;
    box-sizing: border-box;
    z-index: 99;

    a {
        float: left;
        width: 25%;
        text-align: center;
        font-size: 16px;
        position: relative;
    }

    .cur {
        color: #333333;
        font-weight: bold;

        &::after {
            position: absolute;
            bottom: 0px;
            left: 50%;
            margin-left: -8.5px;
            width: 17px;
            height: 4px;
            line-height: 0;
            font-size: 0;
            background: #00cc7d;
            border-radius: 2px;
            content: "";
        }
    }
}

@media screen and (min-width: 768px) {

    .md-gamebox li {
        width: 25%;
        text-align: center;
        margin-bottom: .2rem;
        margin-right: 0;
    }

    .sort-type a {
        width: 23%;
        margin: 0 1% !important;
    }
}
</style>